/**
 * WelcomeScreen - Enhanced Welcome Screen
 * 
 * Features:
 * - Animated logo and text
 * - Quick action cards
 * - Suggestion prompts
 * - Modern gradient design
 */

import { motion } from 'motion/react';
import { AnimatedLogo } from './AnimatedLogo';
import { QuickActionCard } from './QuickActionCard';
import { SuggestionCards } from './SuggestionCards';
import { MessageSquare, FileText, Settings, Sparkles } from 'lucide-react';

export function WelcomeScreen() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] p-8">
      {/* Logo */}
      <AnimatedLogo />
      
      {/* Title with gradient */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2, duration: 0.5 }}
        className="text-center mb-8"
      >
        <h1 className="text-4xl font-bold mb-3 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
          欢迎使用 CAgent
        </h1>
        <p className="text-muted-foreground text-lg">
          基于 Claude Sonnet 4 的专业 AI Agent 平台
        </p>
      </motion.div>
      
      {/* Quick Actions Grid */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3, duration: 0.5 }}
        className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-3xl mb-12"
      >
        <QuickActionCard
          icon={MessageSquare}
          title="开始对话"
          description="与 AI 助手聊天"
          onClick={() => {
            // Focus on input
            const input = document.querySelector('.aui-composer-input') as HTMLTextAreaElement;
            input?.focus();
          }}
        />
        <QuickActionCard
          icon={FileText}
          title="知识库"
          description="上传文档增强对话"
          onClick={() => {
            console.log('Knowledge base - Coming soon');
          }}
        />
        <QuickActionCard
          icon={Settings}
          title="配置助手"
          description="自定义 AI 助手"
          onClick={() => {
            console.log('Configure assistant - Coming soon');
          }}
        />
      </motion.div>
      
      {/* Suggestions */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.4, duration: 0.5 }}
        className="w-full max-w-3xl"
      >
        <div className="flex items-center gap-2 mb-4">
          <Sparkles className="w-5 h-5 text-primary" />
          <h2 className="text-sm font-semibold text-muted-foreground">试试这些提示</h2>
        </div>
        <SuggestionCards />
      </motion.div>
    </div>
  );
}

